<template>
  <div id="person" class="personCard">
    <div style="display: flex;">
      <div id="logoId" class="img-person" :class="{'is-default': isNull(content)}" />
      <div class="person-info">
        <div class="person-name">{{ !isNull(aac001) ? aac003 + '（' + aac001 + '）' : aac003 }}</div>
        <div v-if="content.length == 0 && labelObjArr.length <= 6" style="margin-bottom: 8px;">
          <el-row>
            <el-col v-for="(item, index) in labelObjArr" :key="index" :span="8" style="margin-top: 16px">
              <span> {{ item }}：</span>
            </el-col>
          </el-row>
        </div>
        <div v-if="content.length == 0 && labelObjArr.length > 6 && labelObjArr.length <= 9" style="margin-bottom: 8px;">
          <el-row>
            <el-col v-for="(item, index) in labelObjArr" :key="index" :span="8" style="margin-top: 8px">
              <span> {{ item }}：</span>
            </el-col>
          </el-row>
        </div>
        <div v-if="content.length == 0 && labelObjArr.length > 9 && labelObjArr.length <= 12" style="margin-bottom: 8px;">
          <el-row>
            <el-col v-for="(item, index) in labelObjArr" :key="index" :span="8" style="margin-top: 8px">
              <span> {{ item }}：</span>
            </el-col>
          </el-row>
        </div>
        <div v-if="content.length == 0 && labelObjArr.length > 12" style="margin-bottom: 8px;">
          <el-row>
            <el-col v-for="(item, index) in labelObjArr.slice(0,12)" :key="index" :span="8" style="margin-top: 8px">
              <span> {{ item }}：</span>
            </el-col>
          </el-row>
        </div>
        <div v-if="content.length <= 6" style="margin-bottom: 8px;">
          <el-row>
            <el-col v-for="(item, index) in content" :key="index" :span="8" style="margin-top: 16px">
              <span v-if="fnIsSensitiveInfo(item.keyName)"> {{ item.name }}：</span>
              <span v-else class="row-context" :title="item.name"> {{ item.name }}：</span>
              <el-popover
                v-if="fnIsSensitiveInfo(item.keyName)"
                popper-class="card-popover"
                trigger="hover"
                :content="item.value"
              >
                <span slot="reference">{{ fnInfoSensitive(item.keyName, item.value) }}</span>
              </el-popover>
              <span v-else class="row-context" :title="isNull(CollectionLabel(item.keyName, item.value)) ? item.value : CollectionLabel(item.keyName, item.value)">
                {{ isNull(CollectionLabel(item.keyName, item.value)) ? item.value : CollectionLabel(item.keyName, item.value) }}
              </span>
            </el-col>
          </el-row>
        </div>
        <div v-if="content.length > 6 && content.length <= 9" style="margin-bottom: 8px;">
          <el-row>
            <el-col v-for="(item, index) in content" :key="index" :span="8" style="margin-top: 8px">
              <span v-if="fnIsSensitiveInfo(item.keyName)"> {{ item.name }}：</span>
              <span v-else class="row-context" :title="item.name"> {{ item.name }}：</span>
              <el-popover
                v-if="fnIsSensitiveInfo(item.keyName)"
                popper-class="card-popover"
                trigger="hover"
                :content="item.value"
              >
                <span slot="reference">{{ fnInfoSensitive(item.keyName, item.value) }}</span>
              </el-popover>
              <span v-else class="row-context" :title="isNull(CollectionLabel(item.keyName, item.value)) ? item.value : CollectionLabel(item.keyName, item.value)">
                {{ isNull(CollectionLabel(item.keyName, item.value)) ? item.value : CollectionLabel(item.keyName, item.value) }}
              </span>
            </el-col>
          </el-row>
        </div>
        <div v-if="content.length > 9 && content.length <= 12" style="margin-bottom: 8px;">
          <el-row>
            <el-col v-for="(item, index) in content" :key="index" :span="8" style="margin-top: 8px">
              <span v-if="fnIsSensitiveInfo(item.keyName)"> {{ item.name }}：</span>
              <span v-else class="row-context" :title="item.name"> {{ item.name }}：</span>
              <el-popover
                v-if="fnIsSensitiveInfo(item.keyName)"
                popper-class="card-popover"
                trigger="hover"
                :content="item.value"
              >
                <span slot="reference">{{ fnInfoSensitive(item.keyName, item.value) }}</span>
              </el-popover>
              <span v-else class="row-context" :title="isNull(CollectionLabel(item.keyName, item.value)) ? item.value : CollectionLabel(item.keyName, item.value)">
                {{ isNull(CollectionLabel(item.keyName, item.value)) ? item.value : CollectionLabel(item.keyName, item.value) }}
              </span>
            </el-col>
          </el-row>
        </div>
        <div v-if="content.length > 12" style="margin-bottom: 8px;">
          <el-row>
            <el-col v-for="(item, index) in content.slice(0,12)" :key="index" :span="8" style="margin-top: 8px">
              <span v-if="fnIsSensitiveInfo(item.keyName)"> {{ item.name }}：</span>
              <span v-else class="row-context" :title="item.name"> {{ item.name }}：</span>
              <el-popover
                v-if="fnIsSensitiveInfo(item.keyName)"
                popper-class="card-popover"
                trigger="hover"
                :content="item.value"
              >
                <span slot="reference">{{ fnInfoSensitive(item.keyName, item.value) }}</span>
              </el-popover>
              <span v-else class="row-context" :title="isNull(CollectionLabel(item.keyName, item.value)) ? item.value : CollectionLabel(item.keyName, item.value)">
                {{ isNull(CollectionLabel(item.keyName, item.value)) ? item.value : CollectionLabel(item.keyName, item.value) }}
              </span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="insurance-content">
      <div
        v-for="(item, index) in insuranceList"
        :key="index"
        class="insurance-status-img"
        :class="[{ 'pay': item.aac031 == '1' }, { 'pause': item.aac031 == '2' }, { 'end': item.aac031 != '1' && item.aac031 != '2' }, { 'not-first': index != '0' }]"
      >
        <div :class="fnGetInsuranceTypeClass(item.aae140)" />
        <div class="insurance-info">
          <span class="related-info important" :title="CollectionLabel('AAE140', item.aae140)">{{ AAE140_LABELS.get(item.aae140) }}</span>
          <span class="related-info normal" :title="CollectionLabel('AAB301', item.aab359)">{{ CollectionLabel('AAB301', item.aab359) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 险种对应label缩写
import commUtil from '@/views/ynsb_comm/comm/util/commUtil'
import moment from 'moment'

const AAE140_LABELS = new Map()
AAE140_LABELS.set('110', '企业养老')
AAE140_LABELS.set('120', '机关事业')
AAE140_LABELS.set('130', '企业年金')
AAE140_LABELS.set('140', '个人养老')
AAE140_LABELS.set('170', '城乡居民')
AAE140_LABELS.set('180', '职业年金')
AAE140_LABELS.set('210', '失业')
AAE140_LABELS.set('410', '工伤')
AAE140_LABELS.set('420', '职业伤害')
AAE140_LABELS.set('430', '补充工伤')

export default {
  name: 'PersonCustomCard',
  props: {
    labelObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  // 数据字典
  dicts: ['aac004', 'aac008', 'aac031'],
  data() {
    return {
      isCard: true,
      labelObjArr: [],
      keyArray: [],
      aac001: '',
      aac003: '',
      content: [],
      insuranceList: [],
      AAE140_LABELS
    }
  },
  mounted() {
    if (!this.isNull(this.labelObj)) {
      this.labelObjArr = Object.values(this.labelObj)
    }
  },
  methods: {
    moment,
    CollectionLabel(key, value) {
      // 日期转换
      if (key === 'aac007' || key === 'aac006') {
        return moment(value).format('YYYY-MM-DD')
      }
      // 转码
      const data = this.dict[key]
      if (commUtil.isNull(data)) {
        return value
      }
      const dataList = data.filter(item => item.value === value)
      if (!commUtil.isNull(data)) {
        return dataList[0].label
      }
      return value
    },
    fnSetContentArray(aac001, aac003, valueObj, labelObj, insuranceList) {
      const contentArray = []
      for (const valueKey in valueObj) {
        let contentObj = {}
        for (const labelKey in labelObj) {
          if (valueKey === labelKey) {
            contentObj = { name: labelObj[labelKey], value: valueObj[valueKey], keyName: valueKey }
            contentArray.push(contentObj)
            break
          }
        }
      }
      this.aac001 = aac001
      this.aac003 = aac003
      this.content = [...contentArray]
      this.insuranceList = [...insuranceList]
    },
    fnGetInsuranceStatusClass(aac031) {
      if (aac031 === '1') {
        return 'insurance-status-img pay'
      }
      if (aac031 === '2') {
        return 'insurance-status-img pause'
      }
      return 'insurance-status-img end'
    },
    fnGetInsuranceTypeClass(aae140) {
      if (aae140 === '210') {
        return 'insurance-type-icon unemployment'
      }
      if (aae140 === '410') {
        return 'insurance-type-icon injury'
      }
      return 'insurance-type-icon pension'
    },
    fnInfoSensitive(key, value) {
      if (key === 'aac002') {
        return commUtil.isNull(value) ? '' : `${value.substring(0, 6)}********${value.substring(14)}`
      } else if (key === 'aac006') {
        return commUtil.isNull(value) ? '' : '****-**-**'
      } else if (key === 'aae005') {
        return commUtil.isNull(value) ? '' : `${value.substring(0, 3)}****${value.substring(7)}`
      }
      return value
    },
    fnIsSensitiveInfo(valueKey) {
      for (const item of this.keyArray) {
        if (valueKey === item) {
          return true
        }
      }
      return false
    },
    isNull(value) {
      return value === undefined || value === null || value.length <= 0
    }
  }
}
</script>

<style scoped>
.personCard {
  overflow: hidden;
  background: inherit;
  background-color: #f6faff;
  box-sizing: border-box;
  border: 1px solid #cdcec6;
  border-radius: 4px;
  box-shadow: none;
  padding: 16px 0px;
  margin-bottom: 8px;
}

.img-person {
  height: 136px;
  width: 112px;
  margin-left: 32px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("../commImg/logo-person-new.png");
}

.person-info {
  margin-left: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.person-name {
  border-width: 0px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  margin-top: 8px;
}

.row-context {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.insurance-content {
  display: flex;
  margin-left: 16px;
}

.insurance-status-img {
  width: 140px;
  height: 64px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: left;
  &.not-first {
    margin-left: 16px;
  }
&.pay {
    background-image: url("../commImg/icon-insured-pay.png");
  }

  &.pause {
    background-image: url("../commImg/icon-insured-pause.png");
  }

  &.end {
    background-image: url("../commImg/icon-insured-end.png");
  }
}

.insurance-type-icon {
  display: inline-block;
  height: 44px;
  width: 44px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  &.pension {
    background-image: url("../commImg/icon-insurance-pension.png");
  }

  &.unemployment {
    background-image: url("../commImg/icon-insurance-unemployment.png");
  }

  &.injury {
    background-image: url("../commImg/icon-insurance-injury.png");
  }
}

.insurance-info {
  margin-bottom: 4px
}

.card-popover {
  margin-top: 4px !important;
  padding: 4px !important;
  min-width: auto !important;
  line-height: 1 !important;
  text-align: center !important;
}

.related-info {
  display: block;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  &.important {
    width: 74px;
    font-family: PingFangHK-Medium;
    font-size: 16px;
    color: #000000;
  }

  &.normal {
    width: 100px;
    font-family: PingFangHK-Regular;
    font-size: 12px;
    color: #000000;
  }

  &.secondary {
    font-family: PingFangHK-Light;
    font-size: 12px;
    color: #666666;
  }
}
</style>

